@extends('admin::layouts.master')

@section('title')角色管理@endsection

@section('css')

@endsection

@section('nav')
    <div class="row mb-2">
        <div class="col-sm-6">
            <h1 class="m-0">角色管理</h1>
        </div>
        <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="{{route('admin.role')}}">角色管理</a></li>
                <li class="breadcrumb-item active">分配权限</li>
            </ol>
        </div>
    </div>

@endsection

@section('content')
    <div class="card">
        <div class="card-header">
            分配角色权限
        </div>
        <div class="card-body">
            <form class="form-horizontal" action="{{route('admin.role.assignPermission',['id'=>$role->id])}}"
                  method="POST">
                <div class="form-group">
                    <label>角色名:</label>
                    <span>{{$role->display_name}}</span>
                </div>
                <hr/>

                <div class="layui-input-block">
                    @forelse($permissions as $p1)
                        <div class="custom-control">
                            <input class="form-check-input level1" id="menu{{$p1->id}}" type="checkbox" name="permissions[]"
                                   value="{{$p1->id}}" {{$p1->own??''}} >
                            <label for="menu{{$p1->id}}" class="form-check-label">{{$p1->display_name}}</label>
                        </div>
                        @if($p1->child->isNotEmpty())
                            @foreach($p1->child as $p2)
                                <div style="margin-left: 50px;">
                                    <div class="custom-control">
                                        <input class="form-check-input level2" id="menu{{$p1->id}}-{{$p2->id}}" type="checkbox"
                                               name="permissions[]"
                                               value="{{$p2->id}}" {{$p2->own??''}}>
                                        <label for="menu{{$p1->id}}-{{$p2->id}}"
                                               class="form-check-label">{{$p2->display_name}}</label>
                                    </div>
                                </div>
                                @if($p2->child->isNotEmpty())
                                    <div style="margin-left: 100px;">
                                        @foreach($p2->child as $p3)
                                            <div class="custom-control-inline" style="margin-left: 30px;">
                                                <input class="form-check-input level3" type="checkbox"
                                                       id="menu{{$p1->id}}-{{$p2->id}}-{{$p3->id}}"
                                                       name="permissions[]" value="{{$p3->id}}" {{$p3->own??''}}>
                                                <label for="menu{{$p1->id}}-{{$p2->id}}-{{$p3->id}}"
                                                       class="form-check-label">{{$p3->display_name}}</label>
                                            </div>
                                        @endforeach
                                    </div>
                                @endif
                            @endforeach
                        @endif
                        <hr>
                    @empty
                        <div style="text-align: center;padding:20px 0;">
                            无数据
                        </div>
                    @endforelse
                </div>

                {{method_field('put')}}
                {{csrf_field()}}

                <div class="layui-form-item">
                    <label for="" class="layui-form-label"></label>
                    <div class="layui-input-block">
                        <button type="submit" class="btn btn-dark">确 认</button>
                        <a href="{{route('admin.role')}}" class="btn btn-default">返 回</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('js')
    <script>

        $('input[id^=menu]').change(function(){

            var id = $(this).attr('id');
            level = id.split("-").length;

            checkLevel(id,level);
        });


        function checkLevel(id,level){

            var idArr = id.split("-");

            $("input[id^="+id+"-]").each(function(){

                if (id !== $(this).attr('id')){

                    $('#'+id).prop('checked')
                        ? $(this).prop('checked',true)
                        : $(this).prop('checked',false)
                }

            })

            if ($('#'+id).prop('checked')){

                if (level == 2){
                    $('#'+idArr[0]).prop('checked',true);
                }
                if (level == 3){
                    $('#'+idArr[0]).prop('checked',true);
                    $('#'+idArr[0]+'-'+idArr[1]).prop('checked',true);
                }
            }

        }

    </script>
@endsection